<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 888px;
            height: 300px;
            margin: 200px auto;
            position: relative;
        }
   
        p{
            position: absolute;
            top: 0;
            left: 0;
            font-size: 36px;
            font-weight: 600;
        }
        #text{
            color: #666;
        }
        #copyText{
            /* color: rgb(253, 145, 145); */
        }


        span {
            display: inline-block;
            white-space: nowrap;
            background: linear-gradient(to right, #ABDCFF, #0396FF);
            /* 背景被裁剪成文字的前景色。 */
            -webkit-background-clip: text;
            color: transparent;
            animation: landIn 1s linear;
        }

        @keyframes landIn {
            0% {
                width: 0;
            }
            100% {
                width: 1em;
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <p id="text">你好呀，我是南极大冰块~目前是一名在线掘金高级摸鱼师，精通摸鱼、划水、坐着睡觉、拍马屁、吹牛、甩锅、吵架等前端开发必备技能~关注我，一起学习好玩的前端知识吧！</p>
        <p id="copyText"></p>
    </div>
    <script>
        let text = document.querySelector("#text")
        let copyText = document.querySelector("#copyText")
        // textContent 属性设置或返回指定节点的文本内容，以及它的所有后代。
        let letters = text.textContent.split("")
        console.log(letters)
        for (let i = 0; i < letters.length; i++) {
            let span = document.createElement("span")
            span.textContent = letters[i]
            setTimeout(() => {
                copyText.append(span)
            }, 1000*i)
        }
    </script>
</body>
</html>